import { IonBadge, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonChip, IonIcon } from "@ionic/react"
import { FoodItem } from "../../models/FoodItem"
import { cart, flame, heart, heartOutline, star, time } from "ionicons/icons"


interface FoodCadProps {
    food: FoodItem
    setFavorite(id: number): void
    addToCart(food: FoodItem): void
    inFavorites(id: number): boolean
}


const FoodCard = ({ food, setFavorite, addToCart, inFavorites }: FoodCadProps) => {
    return (
        <IonCard key={food.id} className="food-card">
            <div className="food-image-container">
                <img
                    src={food.image}
                    alt={food.name}
                    className="food-image"
                    loading="lazy"
                />
                <div className="food-overlay">
                    <IonButton
                        fill="clear"
                        className="favorite-btn"
                        onClick={() => setFavorite(food.id)}
                    >
                        <IonIcon
                            icon={inFavorites(food.id) ? heart : heartOutline}
                            color={inFavorites(food.id) ? 'danger' : 'light'}
                        />
                    </IonButton>
                    {food.isFeatured && (
                        <IonChip color="danger" className="featured-chip">
                            推荐
                        </IonChip>
                    )}
                </div>
            </div>

            <IonCardHeader>
                <div className="food-header">
                    <IonCardTitle className="food-name">{food.name}</IonCardTitle>
                    {food.isVeg && (
                        <IonBadge color="success" className="veg-badge">
                            素食
                        </IonBadge>
                    )}
                </div>
                <IonCardSubtitle className="food-description">
                    {food.description}
                </IonCardSubtitle>
            </IonCardHeader>

            <IonCardContent>
                <div className="food-tags">
                    {food.tags?.map((tag, index) => (
                        <IonChip key={index} color="medium" size="small">
                            {tag}
                        </IonChip>
                    ))}
                </div>

                <div className="food-info">
                    <div className="food-price">¥{food.price}</div>
                    <div className="food-stats">
                        <IonBadge color="warning" className="food-rating">
                            <IonIcon icon={star} />
                            {food.rating}
                        </IonBadge>

                        <IonBadge color="medium" className="food-time">
                            <IonIcon icon={time} />
                            {food.prepTime}分钟
                        </IonBadge>

                        <IonBadge color="danger" className="food-calories">
                            <IonIcon icon={flame} />
                            {food.calories}卡
                        </IonBadge>
                    </div>
                </div>

                <IonButton
                    expand="block"
                    color="primary"
                    className="add-to-cart-btn"
                    onClick={() => addToCart(food)}
                >
                    <IonIcon icon={cart} slot="start" />
                    加入购物车
                </IonButton>
            </IonCardContent>
        </IonCard>
    )

}


export default FoodCard